<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>MRI Viewer</title>
        <link rel="stylesheet" type="text/css" href="static/stylesheets/screen.css" />
    </head>
    <body>
    	<div class="controlTab" id="links">
    		<a href="#textures" style='font-weight:bold'>MRI&nbsp&nbsp&nbsp</a>
    		<a href="#elements">Elements&nbsp&nbsp&nbsp</a>
    		<a href="#activations">Activations&nbsp&nbsp&nbsp</a>
    		<a href="#controls">Controls&nbsp&nbsp&nbsp</a>
    		<a href="#info">Info&nbsp&nbsp&nbsp</a>
    	</div>
    	<div class="controlTab" id="infoTab" style="display:none">
    		<section id="info1">
    			Experimental connectome viewer. 
    			<br>
    			Due the experimental nature of this site some features may be broken or may not
    			work as intended. If you notice any bugs please don't hesitate to report them to me.
    		</section>
    		<section>
    			<br>
    			This project is open source under the GNU lesser GPL. The source
    			code is available at <a href="http://code.google.com/p/conview/">google code.</a>
    			<br>
    		</section>
    		<section>
    			<br>
    			For any questions or feedback contact schurade(at)cbs.mpg.de
    			<br> 
    		</section>
    		<br><br>
    	</div>
    	<div class="controlTab" id="controlTab1" style="display:none">
			<section id="controls">	
				<div id="controls-toggles">
				<input type="button" id="button_localFiberColor" value="toggle fibre color">
				<input type="button" id="button_textureInterpolation" value="toggle fibre tubes">
				<input type="button" id="button_toggleSlices" value="toggle slices">
				<input type="button" id="button_toggleTooltips" value="toggle tooltips">
				</div>
				<br>
			</section>
			<section id="saveload">
				<input type="button" id="button_save" value="Save" id="save">
				<input type="button" id="button_load" value="Load" id="load">
				<input type="text" id="textInput">
				<input type="button" id="button_clear" value="Clear" onclick="document.getElementById('textInput').value =''">
				<br><input type="checkbox" id="saveLoc">use browser storage<br>
				<br>
				Record and play user input.
				<br>
				<input type="button" id="button_record" value="Record">
				<input type="button" id="button_play" value="Play">
				<br>
				<input type="button" id="button_screenshot" value="Screenshot">
				<br>
				<br>
				Starts video recording by sending frames to a webserver.
				<br> 
				<input type="button" id="button_video" value="Video">
				<br>
				
				
			</section>
			<section id="animation">
				<table>
					<tr>
						<td></td>
						<th>time step</th>
						<th>x step</th>
						<th>y step</th>
						<th>frames</th>
					</tr>
					<tr>
						<td><input type="button" name="Test" value="rotate" id="button_rotate"></td>
						<td><input type="text" size="6" id="animT" value=50></td>
						<td><input type="text" size="6" id="animX" value=30></td>
						<td><input type="text" size="6" id="animY" value=0></td>
						<td><input type="text" size="6" id="animF" value=50></td>
					</tr>
				</table>
				<br>
			</section>
			
		</div>
		<div class="controlTab" id="mriTab" style="display:block">
			<section id="textures">
				<div id="controls-slices">
					<div><label for="sliceX">X</label><input type="range" min="0" max="255" id="sliceX" value="80" step="1" /> <span class="value"></span></div>
					<div><label for="sliceY">Y</label><input type="range" min="0" max="255" id="sliceY" value="100" step="1" /> <span class="value"></span></div>
					<div><label for="sliceZ">Z</label><input type="range" min="0" max="255" id="sliceZ" value="80" step="1" /> <span class="value"></span></div>
				</div>
				<table>
					<tr>
						<th>Primary MRI</th>
					</tr>
					<tr>
						<td><select id="textureSelect"></select></td>
					</tr>
					<tr>
						<th>Overlay</th>
						<th>Color Map</th>
					</tr>
					<tr>
						<td>
							<select id="textureSelect2">
								<option value="none">none</option>
							</select>
						</td>
						<td>
							<select id="colormapSelect">
								<option value="0">none</option>
								<option value="1">Red-Yellow</option>
     							<option value="2">Blue-Light Blue</option>
     							<option value="3">Rainbow</option>
							</select>
						</td>
					</tr>
				</table>
				<br>
				<div class="texSliders">
				thresholds:
				<br>
				<table>
					<tr>
						<td id="tn">&nbsp;</td>
						<td><input type="range" min="0" max="100" id="threshold1" value="0" step="1"  /></td>
						<td><input type="range" min="0" max="100" id="threshold2" value="0" step="1"  /></td>
						<td id="tp">&nbsp;</td>
					</tr>
					<tr>
						<td>alpha</td>
					</tr>
					<tr>
						<td id="texAlpha">&nbsp;</td>
						<td><input type="range" min="0" max="1.0" id="alpha2" value="1.0" step="0.01" /></td>
					</tr>
				</table>
				<br><input type="checkbox" id="interpolate">disable texture interpolation<br>
				</div>
			</section>
		</div>
		
		<div class="controlTab" id="elementTab" style="display:none">
			<section id="elements"></section>
			<select id="elementSelect">
			</select>
			<br />
			<input type="range" min="0" max="100" id="elementAlpha" value="0" step="1" />
			
			<!-- <input type="file" id="files" name="files[]" multiple />
			<output id="list"></output> -->
		</div>
		
		<div class="controlTab" id="activationTab" style="display:none">
			<section id="activations"></section>
			
			<select id="activationSelect">
			</select>
			<br />
			<input type="range" min="0" max="160" id="activationCoordX" value="0" step="1" />
			<input type="range" min="0" max="200" id="activationCoordY" value="0" step="1" />
			<input type="range" min="0" max="160" id="activationCoordZ" value="0" step="1" />
			<input type="range" min="1" max="25" id="activationSize" value="0" step="1" />
			
			<!--<a href="#inputActivations">Input activations</a><br>-->
			<section id="connections"></section>
			<input type="button" id="button_animate" value="Animate">
			<input type="button" id="button_recalcFibers" value="Select Fibers">
			<input type="button" id="button_resetFibers" value="Reset Fibers">
		</div>
		
		<div class="controlTab" id="status">
			Loading...Please wait.
		</div>
		<div class="controlTab">
    	<section id="viewButtons"></section>
    	</div>
		<div class="controlTab">
    	<section id="sceneButtons"></section>
    	</div>
		
		<div id="viewer">
			<canvas id="viewer-canvas"></canvas>
		</div>
		<div id="status"></div>

		<script>window.settings = {'DATA_URL': '/devel/data/'};</script>
		<script src="static/javascripts/jquery-1.7.2.min.js"></script>
		<script src="static/javascripts/ui.js"></script>
		<script src="static/javascripts/io.js"></script>
		<script src="static/javascripts/html5slider.js"></script>
		<script src="static/javascripts/webgl-debug.js"></script>
		<script src="static/javascripts/glMatrix-0.9.5.min.js"></script>
		<script src="static/javascripts/webgl-utils.js"></script>
		<script src="static/javascripts/arcball.js"></script>
		<script src="static/javascripts/utils.js"></script>
		<script src="static/javascripts/pnglib.js"></script>
		<script src="static/javascripts/niftii.js"></script>
		<script src="static/javascripts/viewer.js"></script>
    </body>
</html>
